<script setup lang="ts">
import Password from './Password.vue'
import { ref } from 'vue'
const emit = defineEmits(['close', 'finish'])

const PasswrodRef = ref()

const popup = ref<{
  open: () => void
  close: () => void
}>()

function open() {
  popup.value?.open()
}
function close() {
  popup.value?.close()
}

function handleInput(inputList: number[]) {
  emit('finish', inputList)
}

function handleClose() {
  PasswrodRef.value.clear()
  close()
  emit('close')
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <uni-popup ref="popup" :is-mask-click="false" type="bottom" :safe-area="false" class="uni_popup">
    <view class="popupBox">
      <view class="close">
        <text @click="handleClose" class="iconfont icon_close"></text>
      </view>
      <Password ref="PasswrodRef" @finish="handleInput" />
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.popupBox {
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
  height: 916rpx;
  .close {
    padding: 28rpx 28rpx 0;
    .iconfont {
      font-size: 24rpx;
    }
  }
}
</style>
